<template>
  <div>
    <el-row class="vab-query-form" :gutter="0">
      <el-col :span="24">
        <div class="top-panel">
          <el-button @click="handleBack" style="margin-bottom: 10px">取消</el-button>
          <el-button type="primary" @click="onhandleSubmit" style="margin-bottom: 10px">保存</el-button>
        </div>
      </el-col>
    </el-row>
    <CommonForm
      v-model="form"
      v-loading="formLoading"
      :layout-config="layoutConfig"
      :option="option"
      @on-submit="onhandleSubmit"
      @on-success="onSubmitSuccess"
    >
      <el-card v-loading="subLoading" header="菜单/按钮权限管理">
        <div class="treeContent">
          <CommonVxeTableTree
            v-if="groupid"
            :key="treeKey"
            ref="treeRef"
            :config="{
              expandAll: true,
              expandRowKeys: true,
              checkStrictly: true,
              type: 'checkbox',
              checkStrictlyExtra: true
            }"
            :url="'system/groupMenu/queryMenuRes/' + groupid"
            @on-change-nodes="changeUserNodes"
          />
        </div>
      </el-card>
    </CommonForm>
  </div>
</template>

<script>
import { TableColumnOrFormTypeEnum } from "@/plugins/commonType.enum";
import CommonForm from "@/plugins/form/CommonForm.vue";
import { getDetails, postRequest } from "@/api/mains";
import { succMsg } from "@/utils/MessageUtils";
import CommonVxeTableTree from "@/plugins/tree/CommonVxeTableTree.vue";

export default defineComponent({
  name: "GroupMenuEdit",
  components: {
    CommonForm,
    CommonVxeTableTree
  },
  emits: ["fetch-data", "show-list"],
  setup(props, { expose, emit }) {
    const state = reactive({
      groupid: "",
      treeRef: null,
      treeKey: Math.random(),
      detailUrl: "system/org",
      authUrl: "system/groupMenu/auth",
      formLoading: false,
      subLoading: false,
      //授权菜单请求
      authMenu: {
        ownorgid: "",
        menuids: []
      },
      layoutConfig: {
        //form组件布局
        column: 3,
        columnGap: "40px"
      }
    });

    const option = ref(null);
    const form = ref({
      subList: []
    });
    option.value = {
      column: [
        {
          label: "机构代码",
          prop: "nodecode",
          type: TableColumnOrFormTypeEnum.INPUT,
          disabled: true,
          readonly: true
        },
        {
          label: "名称",
          prop: "nodename",
          type: TableColumnOrFormTypeEnum.INPUT,
          disabled: true,
          readonly: true
        },
        {
          label: "机构类型",
          prop: "type",
          type: TableColumnOrFormTypeEnum.SELECT,
          dictCode: "OrgType",
          placeholder: "请选择机构类型",
          disabled: true,
          readonly: true
        },
        {
          label: "机构描述",
          prop: "memo",
          type: TableColumnOrFormTypeEnum.TEXTAREA,
          expand: 2,
          disabled: true,
          readonly: true
        }
      ],
      formConfig: {
        title: "基本信息",
        labelPosition: "right",
        lableWidth: "120px",
        isInModal: true
      },
      btnsConfig: {
        save: {
          isShow: false
        },
        back: {
          isShow: false
        }
      },
      rules: {},
      goBackPage: "GroupMenuList" //点击返回按钮，如果没配置则不关闭tab
    };

    /**
     * 表单提交成功
     */
    const onSubmitSuccess = () => {
      handleBack();
    };

    /**
     * 回退
     */
    const handleBack = async () => {
      state.authMenu.menuids = [];
      emit("show-list");
    };

    const onhandleSubmit = async () => {
      state.authMenu.menuids = state["treeRef"].getCheckedKeys()?.map(item => item.id);

      state.formLoading = true;
      state.subLoading = true;
      const { code, msg } = await postRequest(state.authUrl, state.authMenu);
      state.formLoading = false;
      state.subLoading = false;
      if (code == 200) {
        succMsg(msg);
        handleBack();
      }
    };

    const showData = async row => {
      state.formLoading = true;
      state.treeKey = Math.random();
      state.groupid = row.id;
      state.authMenu.ownorgid = row.id;
      const res = await getDetails(state.detailUrl, row.id);
      form.value = res.data;
      state.formLoading = false;
    };

    const changeUserNodes = data => {
      console.info(data);
    };

    expose({ showData });

    return {
      ...toRefs(state),
      form,
      option,
      handleBack,
      onSubmitSuccess,
      onhandleSubmit,
      changeUserNodes
    };
  }
});
</script>
